<template v-cloak>
  <view class="detail" v-if="itemObj">
    <view class="detail-title">
      {{ itemObj.title }}
    </view>
    <view class="avatar-username-share">
      <view class="flex">
        <view class="avatar">
          <image src="/static/logo.png" mode="widthFix"></image>
        </view>
        <view class="username-time">
          <view class="username"> 前端知识 </view>
          <view class="time flex">
            <view
              class="ti"
              style="margin-right: 10upx"
              v-if="itemObj.update_at"
            >
              已于{{ itemObj.update_at }} 修改
            </view>
            <view class="ti" style="margin-right: 10upx" v-else>
              发表于:{{ itemObj.create_at }}
            </view>
          </view>
        </view>

        <view class="share" @click="click">
          <text>分享</text>
        </view>
      </view>
      <view class="flex">
        <view
          class="flex"
          style="margin-top: 10upx; font-size: 22upx; color: #666666"
        >
          分类专栏:
          <view
            style="margin-right: 10upx"
            class="padding-md"
            v-for="(item, index) in itemObj.cate_id"
            :key="index"
            @click="goCate(item)"
          >
            <view class="cu-tag sm light bg-purple"> {{ item.title }}</view>
          </view>
        </view>
        <view
          class="flex"
          style="margin-top: 10upx; font-size: 22upx; color: #666666"
        >
          文章标签:
          <view
            style="margin-right: 10upx"
            class="padding-md"
            v-for="(item, index) in itemObj.label_list"
            :key="index"
            @click="goLabel(item)"
          >
            <view class="cu-tag sm light bg-purple"> {{ item.title }}</view>
          </view>
        </view>
      </view>
    </view>

    <video
      v-if="itemObj.video_url"
      id="myVideo"
      style="width: 100%; margin-top: 10upx"
      :src="itemObj.video_url"
      enable-danmu
      controls
      :enable-play-gesture="true"
    ></video>
    <view class="detail-content">
      <mp-html
        container-style="padding:10upx;width:750upx;"
        :markdown="true"
        ref="article"
        :content="itemObj.content"
      ></mp-html>
    </view>

    <view class="divider">
      <u-divider color="#8486f8" font-size="24" bg-color="#F8F8F8"
        >文章结束了</u-divider
      >
    </view>
    <!--  -->
    <view
      class="mask1"
      :class="{ maskClose: !isShow, maskOpen: isShow }"
      catchtouchmove="preventdefault"
    ></view>
    <view
      class="menu-container"
      catchtouchmove="preventdefault"
      v-show="isShow"
    >
      <view class="menu">
        <view class="menu-list">
          <view class="menu-item" @click="goHome">
            <view class="image">
              <image
                mode="aspectFill"
                src="/static/share/icon-home.png"
                class="menu-icon"
              ></image>
            </view>
            <text class="menu-name">返回首页</text>
          </view>
          <view class="menu-item" @click="handlePoster">
            <view class="image">
              <image
                mode="aspectFill"
                src="/static/share/icon-poster.png"
                class="menu-icon"
              ></image>
            </view>
            <text class="menu-name">生成海报</text>
          </view>
          <view class="menu-item">
            <button open-type="share" hover-class="none">
              <view class="image">
                <image
                  mode="aspectFill"
                  src="/static/icon/vx_login.png"
                  class="menu-icon"
                ></image>
              </view>
            </button>
            <text class="menu-name">分享好友</text>
          </view>
        </view>
      </view>
    </view>

    <view class="btn">
      <view
        v-show="isShow"
        @click="click"
        class="btn-main"
        :class="{ menuOpen: isShow, menuClose: !isShow }"
        >+</view
      >
    </view>
    <!--  -->
    <ALoading v-show="aloading"></ALoading>
    <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
    <u-no-network></u-no-network>
    <!-- <image :src="src" mode="widthFix"></image> -->
    <hch-poster
      ref="hchPoster"
      :posterData.sync="posterData"
      @previewImage="previewImage"
    />
    <u-back-top :scrollTop="scrollTop" bottom="40" style="z-index: 99999">
      <view class="back-top-image">
        <image src="/static/icon/icon-back-top.png" mode="widthFix"></image>
      </view>
    </u-back-top>
  </view>
</template>

<script>
import ALoading from "../../components/loading/loading.vue"
import mpHtml from "../../components/mp-html/dist/uni-app/components/mp-html/mp-html"
import HchPoster from "../../components/hch-poster/hch-poster.vue"

export default {
  components: {
    ALoading,
    mpHtml,
    HchPoster,
  },
  data() {
    return {
      id: "",
      itemObj: {},
      isShow: false,
      deliveryFlag: false, //
      aloading: true,
      maskAnimation: "",
      btnAnimation: "",
      scrollTop: 0,
      menuList: [
        {
          name: "返回首页",
          src: "/static/share/icon-home.png",
        },
        {
          name: "生成海报",
          src: "/static/share/icon-poster.png",
        },
        {
          name: "分享好友",
          src: "/static/icon/vx_login.png",
        },
      ],
      // src: "",
      // 海报模板数据
      posterData: {
        poster: {
          //根据屏幕大小自动生成海报背景大小
          url: "", //图片地址
          r: 4, //圆角半径
          w: 270, //海报宽度
          h: 400, //海报高度
          p: 10, //海报内边距padding
        },
        mainImg: {
          //海报主商品图
          url: "", //图片地址
          r: 2, //圆角半径
          w: 250, //宽度
          h: 125, //高度
        },
        title: {
          //商品标题
          text: "", //文本
          fontSize: 14, //字体大小
          color: "#000", //颜色
          lineHeight: 20, //行高
          mt: 20, //margin-top
        },
        codeImg: {
          //小程序码
          url: "", //图片地址
          w: 100, //宽度
          h: 100, //高度
          mt: 40, //margin-top
          r: 50, //圆角半径
        },
        tips: [
          //提示信息
          {
            text: "前端知识", //文本
            fontSize: 14, //字体大小
            color: "#2f1709", //字体颜色
            align: "center", //对齐方式
            lineHeight: 25, //行高
            mt: 20, //margin-top
          },
          {
            text: "长按/识别查看文章", //文本
            fontSize: 12, //字体大小
            color: "#2f1709", //字体颜色
            align: "center", //对齐方式
            lineHeight: 25, //行高
            mt: 20, //margin-top
          },
        ],
      },
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onLoad(options) {
    this.id = options.id
    this.getItem(options.id)
    // this.getQrCode()
    if (options.scene) {
      const scene = decodeURIComponent(options.scene)
      this.getItem(scene)
    }
  },
  onShareAppMessage() {
    return {
      title: this.itemObj.title,
      path: "/pages/detail/detail?id=" + this.itemObj.id,
      imageUrl: this.itemObj.cover,
    }
  },
  onPageScroll: function (e) {
    if (e.scrollTop >= 40) {
      wx.setNavigationBarTitle({
        title: this.itemObj.title,
      })
      wx.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffff",
        animation: {
          duration: 500,
          timingFunc: "easeIn",
        },
      })
    } else {
      wx.setNavigationBarTitle({
        title: "文章详情",
      })
      wx.setNavigationBarColor({
        frontColor: "#ffffff",
        backgroundColor: "#8486f8",
        animation: {
          duration: 500,
          timingFunc: "easeIn",
        },
      })
    }
  },
  onHide() {
    this.isShow = false
  },
  methods: {
    handlePoster() {
      this.$refs.hchPoster.posterShow()
      this.isShow = false
    },
    goHome() {
      uni.switchTab({
        url: "/pages/index/index",
      })
    },
    goLabel(v) {
      console.log(v)
      uni.navigateTo({
        url: "/pages/cate-label/label/label?id=" + v.id + "&title=" + v.title,
      })
    },
    goCate(v) {
      uni.navigateTo({
        url: "/pages/cate-label/cate/cate?id=" + v.id + "&title=" + v.title,
      })
    },
    getItem(id) {
      let data = {
        id:id
      }
      this.$store.dispatch("article/item",data).then(res => {
        this.itemObj = res
        this.posterData.mainImg.url = res.cover
        console.log(res.qrcode_img)
        this.posterData.codeImg.url = res.qrcode_img
        this.posterData.title.text = res.title
        this.aloading = false
      })
    },
    click() {
      this.isShow = !this.isShow
      if (this.isShow) {
        this.maskAnimation = "maskClose"
        this.btnAnimation = "menuClose"
      } else {
        this.maskAnimation = "maskOpen"
        this.btnAnimation = "menuOpen"
      }
    },
  },
}
</script>
<style>
button {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border-radius: 5px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: block;
  /* font-size: 18px; */
  line-height: 2.55555556;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  border: none;
  /* width: 55upx; */
  /* height: 55upx; */
  display: block;
}
button::after {
  border: 1px solid transparent;
  border-radius: 0;
  box-sizing: border-box;
  content: " ";
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-left-color: rgba(0, 0, 0, 0.2);
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
</style>
<style lang="scss" scoped>
.detail {
  padding: 20upx;
  .detail-title {
    font-size: 34upx;
    color: #000000;
    font-weight: 600;
    margin-bottom: 20upx;
  }
  .detail-content {
    margin: 4upx 0 6vw 0;
   padding:0  20upx 20upx 20upx;
    background: #fff;
  }
  .avatar-username-share {
    background: #eeeeee;
    padding: 10upx;
    .avatar {
      image {
        width: 55upx;
        height: 55upx;
        vertical-align: middle;
      }
    }
    .username-time {
      flex: 1;
      margin-left: 10upx;
      .username {
        font-size: 24upx;
        font-weight: 600;
      }
      .time {
        font-size: 18upx;
        color: #666666;
      }
    }
    .share {
      text {
        border: 2upx solid #8486f8;
        padding: 4upx 10upx;
        font-size: 24upx;
        background: #8486f8;
        color: #fff;
      }
    }
  }
  .divider {
    padding-bottom: 4vw;
  }
  .label {
    padding: 2vw 0 4vw;
    text {
      color: #999999;
      font-size: 22upx;
      border-radius: 4upx;
      padding: 4upx 8upx;
      color: #8486f8;
      border: 1upx solid #e1d7f0;
    }
  }
}
.mask1 {
  height: 48px;
  width: 48px;
  background: rgba(0, 0, 0, 0.7);
  /*ie*/
  opacity: 0.7;
  filter: alpha(opacity = 0.7);
  z-index: 1000;
  border-radius: 750upx;
  transform: scale(0);
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -24px;
}

.maskOpen {
  animation: maskO 0.3s both;
}

.maskClose {
  animation: maskC 0.1s both;
}

@keyframes maskO {
  0% {
    transform: scale(0);
  }

  75% {
    transform: scale(24);
  }

  100% {
    transform: scale(48);
  }
}

@keyframes maskC {
  0% {
    transform: scale(48);
  }

  25% {
    transform: scale(24);
  }

  100% {
    transform: scale(0);
  }
}

.btn {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  z-index: 1005;
  bottom: calc(10rpx + env(safe-area-inset-bottom));
}

.btn-main {
  border-radius: 50%;
  z-index: 1005;
  height: 48px;
  font-size: 28px;
  width: 48px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #fff;
  background: #8486f8;
}

.menuOpen {
  animation: menuO 0.3s both;
}

.menuClose {
  animation: menuC 0.3s both;
}

@keyframes menuO {
  0% {
    transform: rotate(0deg);
    color: #fff;
    background: #8486f8;
  }

  100% {
    transform: rotate(45deg);
    color: #000;
    background: #fff;
  }
}

@keyframes menuC {
  0% {
    transform: rotate(45deg);
    color: #000;
    background: #fff;
  }

  100% {
    transform: rotate(-0deg);
    color: #fff;
    background: #8486f8;
  }
}

.menu-container {
  position: fixed;
  width: 100%;
  z-index: 1002;
  bottom: 0;
  left: 0;
}

.menu {
  padding-bottom: calc(48px + 40rpx + env(safe-area-inset-bottom));
}

.menu-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 15rpx;
}

.menu-item {
  display: flex;
  width: 20%;
  flex-direction: column;
  align-items: center;
  animation: bounceInDown 0.45s linear both;
}
.image {
  position: relative;
  width: 80upx;
  height: 80upx;
  border-radius: 50%;
  background: #000;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
  margin-bottom: 8upx;
  .menu-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 55upx;
    height: 55upx;
    // margin-bottom: 15rpx;
  }
}

.menu-name {
  color: #333;
  font-size: 22upx;
  color: #fff;
  margin-bottom: 10ipx;
  font-weight: 600;
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  60% {
    transform: translateY(-10%);
  }

  80% {
    transform: translateY(10%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
</style>
